<template>
  <view class="content">
    <view class="searchList">
      <view v-for="(item, index) in deliveryList" :key="index" class="list" @tap="goHistoryDetail(item)">
        <view class="listTop">
          <image style="width: 156rpx; height: 156rpx; border-radius: 12rpx;" :src="item.merchantHead"
            mode="scaleToFill" />
          <view class="listTopRight">
            <view class="listTitle">
              <text>{{ item.merchantName }}</text>

            </view>
            <view class="listNum">
              <view class="listSales">
                <image src="../static/image/pagesDelivery/Star.png"
                  v-for="(itemStar, indexStar) in Math.floor(item.merchantScore)" :key="indexStar" mode="scaleToFill" />
                <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="item.merchantScore % 1 !== 0"
                  mode="scaleToFill" />
                <text>总销{{ item.merchantSalesVolume }}</text>
              </view>
              <view class="listTime">

                <text class="listKm">>{{ item.distance }}km</text>
              </view>
            </view>
            <view class="listTag">
              {{ item.merchantAnnouncement }}
            </view>
          </view>
        </view>
        <view class="listGoods">
          <view v-for="(itemGoods, indexGoods) in item.goods" :key="indexGoods" class="itemGoods">
            <image :src="itemGoods.img" mode="scaleToFill" />
            <view class="goodsTitle">{{ itemGoods.title }}</view>
            <view class="goodsPrice">
              ￥
              <text>{{ itemGoods.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { selectMerchantList } from '@/api/common'
export default {
  data() {
    return {
      searchValue: '',
      deliveryList: [],
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      merchantTypeId: 0
    }
  },
  onReady() {
  },
  onLoad(e) {
    console.log('看看东西', e)
    this.merchantTypeId = e.merchantTypeId
    this.getsearch()

  },
  methods: {
    getsearch() {
      console.log('111111')
      let obj = {
        lng: "118.783799",
        lat: "31.979234",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        merchantTakeout: 2,//tabbar标识
        merchantTypeId: this.merchantTypeId
      }
      selectMerchantList(obj).then(res => {
        // console.log(res,'看看这个res是什么')
        // this.deliveryList = res.data
        console.log('健康检测列表', res)

        if (this.pageNum === 1) {
          this.deliveryList = res.data
        } else {
          this.deliveryList = this.deliveryList.concat(res.data)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
      })
    },

    goHistoryDetail(item) {
      uni.navigateTo({
        url: '/pagesHealth/goHistoryDetail?detailid=' + item.merchantId + '&distance=' + item.distance,
      })
    }
  },
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getsearch()
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  background: #F5F5F5;
  min-height: 100vh;
}

.searchList {
  .list {
    background: white;
    border-radius: 8rpx;
    padding: 24rpx;
    margin-bottom: 10rpx;

    .listTop {
      display: flex;

      image {
        width: 156rpx;
        height: 156rpx;
        border-radius: 6rpx;
      }

      .listTopRight {
        margin-left: 24rpx;
        flex: 1;

        .listTitle {
          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
            font-style: normal;
          }
        }

        .listNum {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          height: 36rpx;
          font-style: normal;
          margin: 18rpx 0;

          .listSales {
            display: flex;
            align-items: center;

            image {
              width: 24rpx;
              height: 22rpx;
              margin-right: 4rpx;
            }

            text {
              margin-left: 12rpx;
              // margin-top: 10rpx;
            }
          }

          .listTime {
            display: flex;
            align-items: center;

            .listKm {
              margin-left: 12rpx;
            }
          }
        }

        .listTag {
          display: flex;
          align-items: center;
          color: #999999;
          font-size: 20rpx;


        }
      }
    }

    .listGoods {
      display: flex;
      overflow-x: auto;
      margin-top: 24rpx;

      .itemGoods {
        width: 156rpx;
        margin-right: 20rpx;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 132rpx;
          border-radius: 12rpx;
        }

        .goodsTitle {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 33rpx;
          font-style: normal;
          margin-top: 18rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 定义文本的行数 */
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .goodsPrice {
          font-size: 20rpx;
          font-family: PingFang SC, PingFang SC;
          color: #D12C25;
          font-style: normal;

          text {
            font-size: 28rpx;
          }
        }
      }
    }
  }
}

::v-deep .searchInput .u-content {
  background-color: white !important;
  padding-right: 0 !important;
}

::v-deep .searchInput .u-input {
  background-color: white !important;
}

.searchList {
  padding: 24rpx 32rpx;
}
</style>
